<template>
  <div class="login-container">
    <form class="login-form" @submit.prevent="login">
      <h2 class="login-heading">登录</h2>
      <div class="form-group">
        <label for="username"><i class="fas fa-user"></i> 用户名:</label>
        <input
          type="text"
          id="username"
          v-model="username"
          placeholder="Enter your username"
          required
        />
      </div>
      <div class="form-group">
        <label for="password"><i class="fas fa-lock"></i> 密码:</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="Enter your password"
          required
        />
      </div>
      <div class="form-group">
        <label for="remember">记住我</label>
        <input type="checkbox" id="remember" v-model="remember" />
      </div>
      <button type="submit">Login <i class="fas fa-sign-in-alt"></i></button>
      <div class="forgot-password">
        <a href="#">忘记密码?</a>
      </div>
      <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      const data = {
        username: this.username,
        password: this.password
      }

      axios
        .post('http://localhost:8080/login', data)
        .then((response) => {
          localStorage.setItem('jwt-token', response.data.data.jwt)
          console.log('Login successful:', response.data)
          this.$router.push('/reco')
        })
        .catch((error) => {
          console.error('Login failed:', error.response.data)
        })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-form {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}
</style>
